<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="70px"
    >
      <el-form-item :label="t('systemUser.fields.jobCode')" prop="jobCode">
        <el-input
          v-model="queryParams.jobCode"
          :placeholder="t('common.inputTextPlaceholder') + t('systemUser.fields.jobCode')"
          clearable
          @keyup.enter="handleQuery"
          class="!w-120px"
        />
      </el-form-item>
      <el-form-item :label="t('systemUser.fields.nickname')" prop="nickname">
        <el-input
          v-model="queryParams.nickname"
          :placeholder="t('common.inputTextPlaceholder') + t('systemUser.fields.nickname')"
          clearable
          @keyup.enter="handleQuery"
          class="!w-120px"
        />
      </el-form-item>
      <el-form-item :label="t('systemUser.fields.mobile')" prop="mobile">
        <el-input
          v-model="queryParams.mobile"
          :placeholder="t('common.inputTextPlaceholder') + t('systemUser.fields.mobile')"
          clearable
          @keyup.enter="handleQuery"
          class="!w-120px"
        />
      </el-form-item>
      <el-form-item class="!mr-0">
        <el-button @click="handleQuery">
          <Icon icon="ep:search" />
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" />
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <vxe-table
    ref="tableRef"
    v-loading="loading"
    :data="list"
    stripe
    :row-config="{ keyField: 'id' }"
    :checkbox-config="{
      reserve: true,
      checkMethod: ({ row }) => !selectList.includes(row.id)
    }"
    :column-config="{ resizable: true }"
    :size="vxeTableSize"
  >
    <vxe-column type="checkbox" width="50" align="center" />
    <vxe-column
      :title="t('systemUser.fields.jobCode')"
      field="jobCode"
      align="center"
      show-header-overflow
      show-overflow
      min-width="60"
    />
    <vxe-column
      :title="t('systemUser.fields.nickname')"
      field="nickname"
      align="center"
      show-header-overflow
      show-overflow
      min-width="60"
    />
    <vxe-column
      :title="t('systemUser.fields.mobile')"
      field="mobile"
      align="center"
      show-header-overflow
      show-overflow
      min-width="95"
    />
    <vxe-column
      :title="t('systemUser.fields.deptName')"
      field="deptName"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    />
    <vxe-column
      :title="t('systemUser.fields.zcm')"
      field="zcm"
      align="center"
      show-header-overflow
      show-overflow
      min-width="70"
    />
    <vxe-column
      :title="t('systemUser.fields.workingStatus')"
      field="workingStatus"
      align="center"
      show-header-overflow
      show-overflow
      min-width="70"
    >
      <template #default="scope">
        <dict-tag
          v-if="scope.row.workingStatus"
          :type="DICT_TYPE.WORKING_STATUS"
          :value="scope.row.workingStatus"
        />
      </template>
    </vxe-column>
  </vxe-table>
  <!-- 分页 -->
  <Pagination
    class="justify-center"
    :total="total"
    v-model:page="queryParams.pageNo"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
    layout="total, prev, pager, next"
  />
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as UserApi from '@/api/system/user'
import { UserVO } from '@/api/system/user'
import { useAppStore } from '@/store/modules/app'
import type { VxeTableInstance } from 'vxe-table'
import { BatchSpecialistApi } from '@/api/recruit/batchspecialist'
import { DICT_TYPE } from '@/utils/dict'

const props = defineProps<{
  batchId: string
}>()

const { t } = useI18n()

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

const loading = ref(false)
const list = ref<UserVO[]>([])
const selectList = ref<number[]>([])
const total = ref(0)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  jobCode: undefined,
  nickname: undefined,
  mobile: undefined,
  sfzs: undefined
})
const queryFormRef = ref() // 搜索的表单

// 搜索按钮操作
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 重置按钮操作
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getUserSelectPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const getSelectedList = async () => {
  const data = await BatchSpecialistApi.getSelectedSpecialistByBatchId({
    pageNo: 1,
    pageSize: -1,
    batchId: props.batchId
  })
  selectList.value = (data.list ?? []).map((item) => item.userId)
}

const tableRef = ref<VxeTableInstance>()

const add = async () => {
  if (loading.value) {
    throw new Error()
  }
  // 获取所有已选择的数据
  const selectedData = [
    ...tableRef.value?.getCheckboxRecords(),
    ...tableRef.value?.getCheckboxReserveRecords()
  ]
  if (selectedData.length === 0) {
    throw new Error()
  }
  loading.value = true
  try {
    await BatchSpecialistApi.addBatchSpecialist(
      props.batchId,
      selectedData.map((item) => {
        return {
          userId: item.id
        }
      })
    )
    // 清空复选框
    tableRef.value?.clearCheckboxRow()
  } finally {
    loading.value = false
    getData()
  }
}

const getData = () => {
  getList()
  getSelectedList()
}

const clean = () => {
  list.value = []
  total.value = 0
  selectList.value = []
}

watch(
  () => props.batchId,
  () => {
    if (props.batchId) {
      getData()
    }
  },
  {
    immediate: true
  }
)

defineExpose({
  add,
  getData,
  clean
})
</script>

<style lang="scss" scoped>
:deep(.vxe-cell--checkbox.is--disabled) {
  .vxe-table-icon-checkbox-unchecked:before {
    content: '\e67d';
  }
}
</style>
